<template>
  <div>
    <!-- card卡片 -->
    <el-card class="box-card filter-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑导航栏 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 筛选条件上部分 -->
      <el-form ref="form" label-width="40px" size="mini">
        <el-form-item label="状态">
          <!--
               el-radio 默认把 label 作为文本和选中之后的 value 值,而不是直接使用 value 属性接收
           -->
          <el-radio-group v-model="articleParamsList.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <el-select v-model="articleParamsList.channel_id" placeholder="请选择频道">
            <el-option label="全部" :value="null"></el-option>
            <el-option v-for="channel in channel" :key="channel.id" :label="channel.name" :value="channel.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="rangeDate"
          type="datetimerange"
          :default-time="['12:00:00']"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="loading" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- card卡片 -->
    <el-card class="box-card">
      <div slot="header">
        根据筛选条件共查询到 {{ total }} 条结果
      </div>
      <!-- 展示书籍内容中间部分 -->
      <!--
            Table 表格组件
            1 把需要展示的数组列表数据绑定给 table 组件的 data 属性
              注意: 不需要 v-for 遍历,组件内部会自动遍历
            2 涉及表格列 el-table-column
              width 可以设定表格列的宽度
              label 可以设定列的标题
              prop 用来设定要渲染的列表项数据字段
       -->
      <el-table
      :data="articleList"
      size="mini"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column label="封面" >
          <template slot-scope="{row}">
            <el-image class="article_cover" :src="row.cover.images[0]" fit="cover" lazy>
              <!-- 没有图片时默认显示的图片 -->
              <div slot="error" class="image-slot">
                <img src="./no-cover.gif" alt="">
              </div>
              <!-- 加载图片时展示的img -->
              <div slot="placeholder" class="image-slot">
                <img
                src="src=http___www.yiso.cn_uploadfile_kindeditor_image_20190626_20190626092296299629.gif&refer=http___www.yiso.gif"
                  alt="">
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="{row}">
            <el-tag :type="articleStatus[row.status].type">{{articleStatus[row.status].text}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="$router.push('/publish?id=' + row.id)"></el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="deleteArticle(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页尾部 -->
      <el-pagination background layout="prev, pager, next" :total="total" size="mini"
        :page-size="articleParamsList.per_page"
        :disabled="loading"
        :current-page.sync="page"
        @current-change="current_changeFn" />
    </el-card>
  </div>
</template>
<script>
  import {
    reqArticleList,
    reqArticleChanle,
    reqDeleteArticle
  } from '@/api'
  export default {
    name: 'Article',
    data() {
      return {
        page: 1, // 实时更新当前在第 ? 页,方便更好的删除数据后刷新当前页
        loading: false, // 请求数据时loading动画状态
        articleList: [], // 存储文章的列表
        channel: [], // 频道类别
        rangeDate: null ,// 时间筛选范围
        total: 0, // 每次筛选结果返回的数据总数量
        articleStatus: [{
            text: '草稿',
            type: 'info'
          },
          {
            text: '待审核',
          },
          {
            text: '审核通过',
            type: 'success'
          },
          {
            text: '审核失败',
            type: 'warning'
          },
          {
            text: '已删除',
            type: 'danger'
          }
        ],
        // 查询文章参数列表
        // null 代表不传参数给后端
        articleParamsList: {
          page: 1, // 请求第 ? 页的数据
          per_page: 10, // 页码大小(每次请求多少条数据)
          status: null, // 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，不传为全部
          channel_id: null, // 频道所选中的值
          begin_pubdate: null, // 按需筛选文章的时间跨度(开始)          end_pubdate: null, // 按需筛选文章的时间跨度(结束)
        }
      }
    },
    created() {
      this.getArticleListFn()
      this.getArticleChanle()
    },
    methods: {
      onSubmit() {
        // 从第一页开始查
        this.articleParamsList.page = 1
        this.getArticleListFn()
      },
      // 获取文章列表
      async getArticleListFn() {
        this.loading = true
        const res = await reqArticleList(this.articleParamsList)
        console.log(res, '文章列表')
        try {
          if (res.data.results) {
            const {
              results,
              total_count: total
            } = res.data
            this.articleList = res.data.results
            this.total = total
          }
        } finally {
          this.loading = false
        }
      },
      // 获取频道列表
      async getArticleChanle() {
        const res = await reqArticleChanle()
        console.log(res, 'chanel')
        if (res.data.channels) {
          this.channel = res.data.channels
        }
      },
      // 删除文章
      deleteArticle(articleId){
        // console.log(articleId.toString())
        // 该接口无法完成 jsonbigint 的精准转换,失效
        this.$confirm('确认删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            const res = await reqDeleteArticle(articleId)
            // 删除成功后获取当前页最新的数据列表
            this.getArticleListFn(this.page > 1 ? this.page : 1)
            console.log(res)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },
      // 分页切换事件
      current_changeFn(page) {
        this.articleParamsList.page = page
        this.getArticleListFn()
      },
    },
    watch:{
      rangeDate(){
        if(this.rangeDate){
          this.articleParamsList.begin_pubdate = this.rangeDate[0]
          this.articleParamsList.end_pubdate = this.rangeDate[1]
        }else{
          // 检查存储时间的数组是否还有值,无值则删除参数
          this.articleParamsList.begin_pubdate = ""
          this.articleParamsList.end_pubdate = ""
        }
      }
    },
    computed: {},
    components: {}
  }
</script>
<style lang="less" scope>
  .text {
    font-size: 14px;
  }

 img {
   width: 100%;
 }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .filter-card {
    margin-bottom: 30px;
  }

  .el-pagination {
    margin-top: 10px;
  }

  .article_cover {
    width: 90px;
    height: 100px;
    display: flex;
    align-items: center;
  }
</style>
